<script setup>
import Nav_item from "../item/nav_item.vue";
import {goCommunity, goHome, goMy, goNeighborhood, goService} from "../../../tools/go";

/**
 * default_nav 是否使用默认的底部导航栏 默认 是
 * default_icon_display 是否显示图标 默认 是
 * whoActive 当前激活的导航栏 传入导航栏的text 默认 首页
 *
 */
let props = defineProps({
  default_nav:{
    type: Boolean,
    default: true
  },
  default_icon_display: {
    type: Boolean,
    default: true
  },
  whoActive:{
    type: String,
    default: "首页"
  }
})

const emit = defineEmits(["item-click"])

const handleClick = (text) => {
  emit("item-click", text)
}


</script>

<template>
  <view class="nav_footer">
      <slot v-if="!default_nav"></slot>
    <nav_item @click="goHome" @hand_click="handleClick" v-if="default_nav" :show-icon="default_icon_display" :is-active="whoActive === '首页'" icon="home" text="首页"></nav_item>
    <nav_item @click="goCommunity" @hand_click="handleClick" v-if="default_nav" :show-icon="default_icon_display" :is-active="whoActive === '小区'" icon="account-group"  text="小区"></nav_item>
    <nav_item @click="goService" @hand_click="handleClick" v-if="default_nav" :show-icon="default_icon_display" :is-active="whoActive === '社区'" icon="earth" text="社区"></nav_item>
    <nav_item @click="goNeighborhood" @hand_click="handleClick" v-if="default_nav" :show-icon="default_icon_display" :is-active="whoActive === '邻里'" icon="account-multiple" text="邻里"></nav_item>
    <nav_item @click="goMy" @hand_click="handleClick" v-if="default_nav" :show-icon="default_icon_display" :is-active="whoActive === '我的'" icon="account" text="我的"></nav_item>
  </view>
</template>

<style scoped lang="scss">

@use "../../../static/css/main";

.nav_footer{
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
  padding: 10px 0;
  z-index: 1000;
  justify-content: space-around;
  @include main.useTheme() {
    background-color: main.getVal('one_lv_bg_color');
    border-top: 1px solid main.getVal('primary_border_color');
  }
}
</style>